<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:34:"template/img/default/img\info.html";i:1524120766;}*/ ?>
<!DOCTYPE html>
<html>
<head>
    <title>图片详情</title>
    <link href="/static/h5/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/h5/css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
        body{background: #000; height: 100%}
        .main{height: 100%;}
        .main-left{
            border-right:1px solid #28292a; height: 100%;}
        .main-center{height: 100%}

        .main-rig{border-left: 1px solid #28292a; height: 100%;}

        .main-center-img{text-align: center; width: 100%;height:100%;  border: green solid 1px; position: relative}
        .main-center-img img{position: absolute; top: 50%; left: 50%;}
    </style>
</head>
<body>
<div class="row main">
    <div class="col-md-2 main-left">1</div>
    <div class="col-md-8 main-center" >
        <div class="main-center-img" style="">
            <img alt="" src="<?php echo $data['img']['thumb']; ?>" id="thumb" style="display: inline-block; vertical-align: middle;" />
        </div>
    </div>
    <div class="col-md-2 main-rig">
        <div style="height: 30px"></div>
        <div class="form-group">
            <label class="col-sm-3 control-label">文件名：</label>
            <div class="col-sm-8">
                <input type="email"  placeholder="用户名" class="form-control" value="<?php echo $data['img']['name']; ?>" title="<?php echo $data['img']['name']; ?>">
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="/static/h5/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/h5/js/bootstrap.min.js?v=3.3.6"></script>

<script>
    var screenH;
    var screeW;
    var imgH;
    var imgW;
    $(function(){
        screen();
    });
    $(window).resize(function() {
        screen();
    });

    // 计算屏幕宽度和高度
    function screen(){
        parent.screenW = $(window).width();
        parent.screenH = $(window).height();
        $("body").css('height',screenH);

        //alert(screenW);
        var nImg = new Image();
        nImg.onload = Thumb();


    }
    // 图片的原始高度和宽度
    function Thumb(){
        // 获取图片实际宽度
        parent.imgH = document.getElementById("thumb").naturalHeight;
        parent.imgW = document.getElementById("thumb").naturalWidth;

        console.log(h);
        if(imgW>800){
            // 缩放图片比例
            $("#thumb").css({"width":'60%'});
            // 获取图片展示宽度
            var w = $("#thumb").width();
            var h = $("#thumb").height();
            $("#thumb").css({"margin-left":-(w/2),"top":screenH/2-h/2});
        }else{
            $("#thumb").css({"margin-left":-imgW/2,"top":screenH/2-imgH/2});
        }


    }





</script>
</body>
</html>
